<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style type="text/css">
			/*优惠券*/
			
			.coupon_list {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				background: #fff;
				margin: 10px 8px 0;
				justify-content: space-between;
				align-items: center;
			}
			
			.coupon_img {
				position: relative;
				width: 106px;
			}
			
			.coupon_img>img {
				width: 100%;
				vertical-align: middle;
			}
			
			.coupon_data {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
				font-size: 12px;
				color: #999;
				padding: 10px 0px 10px 10px;
			}
			
			.coupon_data>div {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
				line-height: 26px;
				height: 26px;
			}
			
			.coupon_data>div:first-child {
				color: #333;
				font-size: 14px;
			}
			/*优惠金额*/
			
			.coupon_sum {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 90%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align: center;
				font-size: 12px;
				color: #fff;
			}
			
			.coupon_sum>div:first-child {
				font-size: 24px;
				margin-bottom: 10px;
				font-weight: 600;
			}
			/*立即使用*/
			
			.coupon_use {
				width: 34px;
				background: #bd212e;
				color: #fff;
				font-size: 14px;
				text-align: center;
				font-weight: 700;
				line-height: 16px;
				padding: 18px 10px;
			}
			/*红包样式*/
			
			.packet_data {
				padding: 0 14px;
			}
			
			.packet_list {
				width: 100%;
				background: url(../../images/packet.png)no-repeat;
				background-size: 100% 100%;
				color: #fff;
				min-height: 80px;
				height: calc(100vw/4);
				max-height: 100px;
				margin-top: 20px;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.packet_list_cls {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.packet_list_cls>div {
				width: 10px;
				width: 20px;
				margin: 0 auto;
				line-height: 16px;
			}
			
			.packet_list_data {
				-webkit-flex: 5;
				flex: 5;
				-webkit-box-flex: 5;
				-moz-box-flex: 5;
				-ms-flex: 5;
				padding-left: 4%;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				align-items: center;
			}
			
			.packet_list_money {
				font-size: 18px;
			}
			
			.packet_list_money>span {
				font-size: 30px;
			}
			
			.packet_list_text {
				padding: 0 10px;
			}
			
			.packet_list_text>div {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			
			.mui-pull-caption {
				font-weight: normal;
				font-size: 12px;
			}
			/*没有优惠券*/
			
			.noshopp {
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align: center;
				font-size: 12px;
				z-index: 10000;
				color: #666;
			}
			
			.noshopp img {
				margin-bottom: 10px;
				width: 50%;
			}
		</style>
	</head>

	<body>
		<div id="choice" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">使用优惠</h1>
			</header>
			<div class="mui-content">
				<div class="coupon_list" v-for="list in list">
					<div class="coupon_img">
						<img src="../../images/youhui.png" />
						<div class="coupon_sum">
							<div>￥{{list.offPrice}}</div>
							<div>满{{list.fullPrice}}可用</div>
						</div>
					</div>
					<div class="coupon_data">
						<div>{{list.couponName}}</div>

						<div>有效期:{{list.endDateStr}}</div>
					</div>
					<div class="coupon_use" @tap="useChoice(list)">
						立即使用
					</div>
				</div>
				<!--以后开发，暂时混合-->
				<!--<div class="packet_data">
						<div class="packet_list" v-for="list in list">
							<div class="packet_list_cls">
								<div>通用券</div>
							</div>
							<div class="packet_list_data">
								<div class="packet_list_money">￥<span>100</span></div>
								<div class="packet_list_text">
									<div>全品类通用券【全平台】</div>
									<div>有效期：2017-3-26</div>
								</div>
							</div>
						</div>
					</div>-->
			</div>
			<div class="noshopp" v-show="list.length<=0">
				<img src="../../images/nopacket.png" alt="" />
				<div>无相关的优惠券</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({
			})
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var list = self.parameter
				var coupon = new Vue({
					el: '#choice',
					data: {
						imgCommonUrl: common.imageUrl,
						list:list
					},
					methods: {
						useChoice:function(data){
							var list = plus.webview.getWebviewById('../order/confirmorder.html');
							mui.fire(list, 'useChoice', { //触发自定义事件
								data: data
							});
							mui.back()
						}
					},
				})
			})
		</script>
	</body>

</html>